<template>
  <div style="border: 1px solid #ccc; z-index: 101">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      :class="valueHtml == '' || valueHtml == '<p><br></p>' ? 'editor' : ''"
      style="height: calc(100% - 100px); overflow-y: hidden"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
      @on-blur="handleBlur"
      @customPaste="customPaste"
    />
  </div>
</template>
<script lang="ts" setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import uploadUrl from '@/service/api'
import { getBaseURL } from '@/service/BaseURL'
import { getCookie } from '@/utils/cookie'
import { ElMessage } from 'element-plus'
import EventBus from '@/utils/EventBus'
import { onBeforeUnmount, ref, shallowRef, onMounted, computed } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

import {
  createEditor,
  createToolbar,
  IEditorConfig,
  IToolbarConfig,
  IDomEditor,
} from '@wangeditor/editor'
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const mode = 'default'
const editorConfig: Partial<IEditorConfig> = { MENU_CONF: {} }
editorConfig.MENU_CONF['uploadImage'] = {
  // 上传地址
  server: getBaseURL() + uploadUrl.upload,
  // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
  fieldName: 'file',
  // 自定义增加 http  header
  headers: {
    Accept: '*/*',
    Authorization: getCookie('bimai_admin_token'),
  },
  // 上传成功 、插入图片
  customInsert(res, insertFn) {
    console.log('customInsert', res)
    const imgInfo = res.data || {}
    const { url } = imgInfo
    if (!url) ElMessage.error(`上传失败！`)

    console.log('自己插入图片', url)
    insertFn(url)
  },
  onSuccess(file: File, res: any) {
    console.log(`${file.name} 上传成功`, res)
  },
  // 单个文件上传失败
  onFailed(file: File, res: any) {
    console.log(`${file.name} 上传失败`, res)
  },
  // 上传错误，或者触发 timeout 超时
  onError(file: File, err: any, res: any) {
    console.log(`${file.name} 上传出错`, err, res)
  },
  // 超时时间，默认为 30 秒
  timeout: 15 * 1000, // 15 秒
}
const customPaste = (editor, event, callback) => {
  // 去除复制自带的样式
  console.log('ClipboardEvent 粘贴事件对象', event)
  const html = event.clipboardData.getData('text/html') // 获取粘贴的 html
  const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本
  //   const rtf = event.clipboardData.getData('text/rtf') // 获取 rtf 数据（如从 word wsp 复制粘贴）
  // 自定义插入内容
  //   console.log(text)
  editor.dangerouslyInsertHtml('<p>' + text + '</p>')

  // 返回 false ，阻止默认粘贴行为
  event.preventDefault()
  callback(false) // 返回值（注意，vue 事件的返回值，不能用 return）

  // 返回 true ，继续默认的粘贴行为
  //   callback(true)
}
// 内容 HTML
const props = defineProps({
  show_box: Boolean,
  text: String,
  enable: {
    type: Boolean,
    default: true,
  },
})

console.log(props.show_box, props.text, props.enable)
const valueHtml = ref(props.text)
const handleCreated = (editor) => {
  if (!props.enable) {
    editor.disable()
  } else {
    editor.enable()
  }
  editorRef.value = editor // 记录 editor 实例，重要！
}
onMounted(() => {
  EventBus.on('submit', () => {
    EventBus.emit('commit_editor', valueHtml.value)
  })
})
const toolbarConfig = {
  excludeKeys: ['group-video', 'group-table', 'insertTable'], // 屏蔽不需要的操作图标
}
const handleBlur = () => {
  console.log(valueHtml.value)
  //   EventBus.emit('editor_blur', valueHtml.value)
}
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  EventBus.off('submit')
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})
</script>

<style lang="scss" scoped>
.editor {
  position: relative;
  &::after {
    position: absolute;
    top: 5px;
    left: 12px;
    color: #ccc;
    content: '提示：标题请使用H1，图片请走上传通道';
  }
}
:deep(.w-e-text-container [data-slate-editor] p) {
  margin: 10px 0;
}
:deep(.w-e-toolbar) {
  border-bottom: 1px solid #e8eaed;
}
</style>
